<template>
  <div>
    
    <div >
      
     
      <!-- 流程列表 -->
      <div class="list" v-for="(item,index) in listOrder" :key="index">
        <div class="tt">
          <div class="left">
            <img src="../assets/order_center/buy.png">
            <span>{{item.shop_name}}</span>
          </div>
          <div class="right">
              <span>等待买家付款</span> 
          </div>
        </div>
        <div class="bianhao"><span>订单编号：</span>{{item.order_num}}</div>
        <div class="center"> 
          <div class="top">
            <div class="left">
              <img :src="item.thumb" alt="">
            </div>
            <div class="right">
              <div class="titles">
                <span>{{item.title}}</span>
              </div>
              <div class="price">
                <span>规格：{{item.spec_name}}</span>
              </div>
              <div class="price">
                <span style="color:#e63f3f;">￥{{item.shop_price}}+{{item.redbag_num}}鸿包</span>
                <span class="num">X {{item.count}}</span>
              </div>
            </div>
          </div>  
          
          <div class="number">
              <span>共一件商品</span>
              <span>合计：{{item.shop_price}}+{{item.redbag_num}}</span>
          </div> 
        </div>
        <div class="bt"> 
            <span class="btz">{{item.created_at.date.split('.')[0]}}</span>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import Vue from 'vue'; 
export default {
  name: 'order_11',
  data () {
    return {
    
     listOrder:[]
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
    }, 
    order3(id){
      let self = this;
      let url = "/api/heOrder";
      self.httpPost(url,{user_id:this.token,token:this.myid,heOrder_id:id},function(res) {
        if (res.code == 200) {   
          self.listOrder=res.data
        }
      })
    } 
  },
  created() {
      document.title = "合并订单";
      this.myid = localStorage.getItem('mytoken');
      this.token = localStorage.getItem('myid');
      this.id = this.$route.query.id; 
      this.order3(this.id)
  }
}
</script>


<style scoped>

.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
  margin-bottom: .03rem;
}
.bt{
  position: relative;
}
.btz{
  /* position: absolute; */
  left: .3rem;
  top: .345rem;
  color: #666;
  font-size: .26rem;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab .right{
    width: 1rem;
    display: flex;
    justify-content: space-between;
}
.top_tab  img{
    width:.43rem;
}
.title{
    margin-top:.02rem;
    padding: 0 .3rem;
    background: #FFF;
    display: flex;
    justify-content: space-between;
}
.title li{
    width:18%;
    padding: .25rem .1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{
    border-bottom: 2px solid #e63f3f;
    color:#e63f3f;
}
.title .bar span{
    font-size: .28rem;
    color:#666;
}
.list{
    width:100%;
    background: #FFF;
    margin-top:.1rem;
}
.list .tt{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .3rem;
}
.list .tt .left{
    display: flex;
    align-items: center;
}
.list .tt .left img{
    width: .32rem;
    height:.32rem;
}
.list .tt .left span{
    font-size: .28rem;
    color:#666;
    margin-left:2px;
}
.list .tt .right span{
    font-size: .24rem;
    color:#e63f3f;
}
.list .center{
    padding: .2rem .3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.list .center .top{
    display: flex;
    justify-content: space-between;
}
.list .center .top .left{
    width:23%;
}
.list .center .top  .left img{
    width:100%;
    height:100%;
}
.list .center .top .right{
    width:73%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.list .center .top .right .titles {
    width:100%;
}
.list .center .top  .right .titles span{
    font-size: .26rem;
    color:#333;
    display: inline-block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.list .center .top .right .price{
    width:100%;
    display: flex;
    justify-content: space-between;
}
.list .center .top .right .price span{
    font-size: .26rem;
    color:#333;
}
.list .center .top .right .price .num{
    font-size: .24rem;
    color:#999;
}
.list .center .number{
    width:100%;
    display: flex;
    justify-content: flex-end;
    padding: .3rem 0;
    font-size: .28rem;
}
.list .center .number span{
   font-size: .24rem;
   color:#666;
}
.bianhao{
  font-size: .28rem;
  color: #666;
  margin-left: .3rem;
}
.list .bt{
    width:100%;
    border-top:1px solid #cecece;
    padding: .2rem .3rem;
    display: flex;
    /* justify-content: flex-end; */
}
.list .bt .cate{
  border: 1px solid #666;
  color: #666; 
  line-height: .32rem;
  border-radius:18px; 
  font-size: .24rem;
  text-align: center;
  padding: .15rem .2rem;
  margin-left: .2rem;
}
.list .bt .cate:nth-child(3){
  color:#e63f3f;
  border:1px solid #e63f3f;
}
.fk{
  color:#e63f3f!important;
  border:1px solid #e63f3f!important;
}
/* 无订单状态 */
.without{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30%;
}
.without img{
  width: 2.23rem;
  height: 2.15rem;
}
.without span:nth-child(2){
  font-size: .26rem;
  color:#707070;
  margin-top: .23rem;
}
.without span:nth-child(3){
  font-size: .30rem;
  color:#b7b7b7;
  margin-top: .3rem;
}
.without .cate{
  color: #FFF; 
	width:2.27rem;
	height:.80rem;
  line-height: .80rem;
  border-radius:10px; 
  font-size: .30rem;
  text-align: center;
	background: #e53a30;
	border:none;
  margin-top: .96rem;
}
</style>
